<template lang="html">
  <div class="detail">
    <img class='banner' :src='message.image'>
    <div class="main">
      <h2>{{ message.storeName }}</h2>

      <b class="price">
        ￥{{ message.price && message.price.toFixed(2)|| 0 }}
        <span>茶籽数量: {{ message.teaSeedNum && message.teaSeedNum.toFixed(2) || 0 }}</span>
      </b>
      <div class="numberBox">
        <i @click='goodNumReduce'>-</i>
        <input v-model='goodNum'/>
        <i @click='goodNumAdd'>+</i>
      </div>

      <p>{{ message.storeInfo }}</p>
      <div style="width:100%; overflow: hidden;margin-top: 10px" v-html="message.goodsDetail"></div>
    </div>
    <v-swiper class="goback"/>
    <footer class="footer">
      <router-link :to="{path:'/'}" class="footer-index">
        <i class="icon-index"></i>
      </router-link>
      <router-link :to="{name:'购物车'}" class="footer-gocar">
        <i class="icon-car"></i>
        <!-- <span v-if="count">{{count}}</span> -->
      </router-link>
      <span class="footer-addcar" @click="addIntoCar">
        加入购物车
      </span>
    </footer>
  </div>
</template>

<script>
import Swiper from '@/components/detail/swiper.vue'
import Chose from '@/components/detail/chose.vue'
import Content from '@/components/detail/content.vue'
import {goodDetail, goodAddCat} from '@/http/api'
import {Toast} from 'mint-ui'

export default {
  components: {
    'v-swiper': Swiper,
    'v-chose': Chose,
    'v-content': Content
  },
  data() {
    return {
      id: '',
      message: {},
      goodNum: 1
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getList()
  },
  methods: {
    async getList() {
      const parmas = {
        id: this.id
      }
      const res = await goodDetail(parmas)
      if (res.code * 1 === 200) {
        this.message = res.data
      }
    },
    async addIntoCar() {
      //  mint-ui的弹出式提示框
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const item = {
        goodNum: this.goodNum,
        pid: this.message.id,
        uid: user.user.uid
      }
      const res = await goodAddCat(item)
      if (res.code * 1 === 200) {
        Toast('加入购物车成功')
      }
    },
    goodNumReduce() {
      if (this.goodNum * 1 <= 1) {
        Toast('商品数量不能小于一个')
        return
      }
      this.goodNum = this.goodNum - 1
    },
    goodNumAdd() {
      this.goodNum = this.goodNum + 1
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/fz.less";
@import "../assets/index/style.css";
.goback {
  position: absolute;
  top: 0;
  left: 0;
}
.detail {
  width: 100%;
  padding-bottom: 14vw;

  .main {
    padding: 0 10px;
    padding-bottom: 20px;
  }
  h2 {
    font-size: 16px;
    margin-top: 16px;
  }

  .price {
    font-size: 20px;
    color: #048AB9;
    margin-top: 10px;
    display: block;
    span {
      font-size: 14px;
      margin-left: 10px;
    }
  }

  p {
    font-size: 14px;
    margin-top: 10px;
    text-indent: 10px;
  }

  .numberBox {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    margin-top: 10px;

    i {
      background: #048AB9;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
    }

    input {
      width: 60px;
      height: 20px;
      line-height: 20px;
      border: 0;
      font-size: 12px;
      text-align: center;
    }
  }

}

.banner {
  width: 100%;
  height: 240px;
}

.footer {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  height: 14vw;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  -moz-user-select: none;
  -webkit-user-select: none;
  .bt();

  .footer-index,
  .footer-gocar,
  .footer-addcar {
    text-align: center;
  }

  .footer-index {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    line-height: 14vw;
    height: 14vw;
    padding-top: 1.5vw;
    border-right-color: #f7f7f7;
    border-right-style: solid;
    .fz(border-right-width, 1);

    i {
      .fz(font-size, 45);
    }

    &:active {
      background-color: #f1f1f1;
    }
  }

  .footer-gocar {
    position: relative;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    height: 14vw;
    line-height: 14vw;
    padding-top: 1.6vw;

    span {
      height: 5.5vw;
      width: 5.5vw;
      line-height: 5.5vw;
      position: absolute;
      top: 0.5vw;
      right: 5.5vw;
      background-color: @cl;
      border-radius: 50%;
      color: #fff;
      .fz(font-size, 24);
    }

    &:active {
      background-color: #f1f1f1;
    }

    i {
      .fz(font-size, 48);
    }
  }

  .footer-addcar {
    -webkit-flex: 6;
    -ms-flex: 6;
    flex: 6;
    line-height: 14vw;
    height: 14vw;

    color: #fff;
    background-color: #048AB9;
    letter-spacing: 0.2vw;

    &:active {
      background-color: #B2D751;
    }
  }
}
</style>
